import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import WeUI from 'react-weui';
import 'whatwg-fetch'

const {
    CellFooter,
    CellsTitle,
    Cells,
    Cell,
    CellBody,
    Input,
    ButtonArea,
    Button,
    TextArea,
    Toptips,
    Toast,
    NavBar,
    NavBarItem,
    Tab
} = WeUI;
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/CreateTeamStyle.css';
import $ from 'jquery';


export default class TeamInfoEdit extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.Finished = this.Finished.bind(this);
        this.state = {
            teamId: this.props.location.query.teamId,
            teamInfo: {},
            hasDirection: false,
            showToptips: false,
            showLoading: true,
            showToast: false,
            toastTimer: null,
            topTipsMsg: "服务器错误！",
            tab: 0,
            //部门列表
            groupList: [],
        }
    }

    showToast() {
        this.setState({showToast: true});

        this.state.toastTimer = setTimeout(() => {
            this.setState({showToast: false});
            window.location.hash = "/userCenter";
        }, 2000);
    }

    showWarn() {
        this.setState({showToptips: true, showLoading: false,});

        this.state.warnTimer = setTimeout(() => {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() {
    }

    componentDidMount() {
        this.getTeamInfoDetail();
    }

    //获取团队详情
    getTeamInfoDetail() {
        //获取团队详情
        let self = this;
        fetch(getHost() + "/team/detail/" + this.state.teamId, {
            method: 'GET',
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    let teamInfo = data.data;
                    self.setState({
                        teamId: teamInfo.teamId,
                        teamInfo: teamInfo,
                        hasDirection: true,
                        showToptips: false,
                        showLoading: false,
                    });
                } else {
                    self.showWarn();
                }
            }).catch(e => {
            self.showWarn();
        });
    }

    //获取部门分组
    getGroupList() {
        let self = this;
        fetch(getHost() + "/team/group/list/" + this.state.teamId, {
            method: 'GET',
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    let groupList = data.data;
                    self.setState({
                        groupList: groupList
                    });
                } else {
                    self.showWarn();
                }
            }).catch(e => {
            self.showWarn();
        });
    }


    //选择企业table
    selectCampanyTab() {
        this.setState({
            tab: 0
        });
        this.getTeamInfoDetail();
    }

    //选择部门
    selectGroupTab() {
        this.setState({
            tab: 1
        });
        this.getGroupList();
    }

    LeftClick() {
    }

    Finished() {
        //确认编辑
        let teamName = $('.team_input').val();
        let direction = $("#direction").val();
        let formData = new FormData();
        formData.append("teamName", teamName);
        formData.append("direction", direction);
        fetch(getHost() + "/team/edit/" + this.state.teamId, {
            method: 'POST',
            body: formData,
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (data.data == "成功") {
                        this.showToast();
                    }
                } else {
                    this.showWarn();
                }
            }).catch(e => {
            this.showWarn();
        });

    }


    //查看部门详情
    checkDepartment(id) {
        location.hash = "/DepartmentInfo?teamGroupId=" + id + "&teamId=" + this.state.teamId + "&teamName=" +this.state.teamInfo.teamName;
    }

    //创建部门
    createDepartment() {
        location.hash = "/CreateEditDepartment?teamId=" + this.state.teamId + ""
    }

    render() {
        let inputDiv = null;
        let textDiv = null;
        if (this.state.teamInfo.teamName) {
            inputDiv = <Input className="team_input" placeholder="公司名称" maxLength="20"
                              defaultValue={this.state.teamInfo.teamName}/>
        }
        if (this.state.hasDirection) {
            if (this.state.teamInfo.direction) {
                textDiv = <TextArea id="direction" placeholder="输入该企业的主要方向" rows="9" maxlength="180"
                                    defaultValue={this.state.teamInfo.direction}/>
            } else {
                textDiv = <TextArea id="direction" placeholder="输入该企业的主要方向" rows="9" maxlength="180"/>
            }
        }

        return (
            <div style={{height: '100%'}}>
                <NavigationBar Title="企业信息" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <Tab>
                    <NavBar style={{position: "relative"}}>
                        <NavBarItem active={this.state.tab === 0}
                                    onClick={this.selectCampanyTab.bind(this)}>企业信息</NavBarItem>
                        <NavBarItem active={this.state.tab === 1}
                                    onClick={this.selectGroupTab.bind(this)}>部门员工</NavBarItem>
                    </NavBar>
                    <div style={{display: this.state.tab === 0 ? null : 'none'}}>
                        <Cells style={{background: "white", marginTop: 0}}>
                            <Cell>
                                <CellBody>
                                    <div>企业名称</div>
                                    {inputDiv}
                                </CellBody>
                            </Cell>
                            <Cell>
                                <CellBody>
                                    <div>负责人</div>
                                    <div className="team_text">{this.state.teamInfo.ownerName}<span
                                        style={{float: "right"}}>(不可修改)</span></div>
                                </CellBody>
                            </Cell>
                            <Cell>
                                <CellBody>
                                    <div>负责人电话</div>
                                    <div className="team_text">{this.state.teamInfo.ownerMobile}<span
                                        style={{float: "right"}}>(不可修改)</span></div>
                                </CellBody>
                            </Cell>
                            <Cell>
                                <CellBody>
                                    <div>企业方向</div>
                                    {textDiv}
                                </CellBody>
                            </Cell>
                        </Cells>
                        <ButtonArea direction="horizontal">
                            <Button type="default" id="FinishButtonStyle" onClick={this.Finished}>确认编辑</Button>
                        </ButtonArea>
                    </div>
                    <div style={{display: this.state.tab === 1 ? null : 'none'}}>
                        <CellsTitle>企业部门</CellsTitle>
                        <Cells style={{background: "white"}}>
                            {this.state.groupList.map((group, index) =>
                                <Cell access onClick={this.checkDepartment.bind(this, group.teamGroupId)} key={index}>
                                    <CellBody>
                                        <div>{group.teamGroupName}({group.teamGroupUserList.length})</div>
                                    </CellBody>
                                    <CellFooter/>
                                </Cell>
                            )}
                        </Cells>
                        <CellsTitle/>
                        <Cells style={{background: "white"}}>
                            <Cell onClick={this.createDepartment.bind(this)} access>
                                <CellBody>
                                    <div className="createDepartment">新建部门</div>
                                </CellBody>
                                <CellFooter/>
                            </Cell>
                        </Cells>
                    </div>
                    <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
                    <Toast icon="success-no-circle" show={this.state.showToast}>修改成功</Toast>
                    <Toptips type="warn" show={this.state.showToptips}>
                        {this.state.topTipsMsg}
                    </Toptips>
                </Tab>
            </div>
        )

    }
}